{include file="index/_meta" /}
    <title>发布资讯</title>
</head>
<body>
    <div id="app">
        <van-nav-bar
                title="发布资讯"
                left-text="返回"
                left-arrow
                @click-left="window.history.back();"
        ></van-nav-bar>
        <van-form @submit="onSubmit">

            <van-field
                    readonly
                    clickable
                    required
                    label="分类"
                    :value="forum_cate"
                    name="forum_cate"
                    placeholder="选择分类"
                    @click="showPicker = true"
            ></van-field>
            <van-popup v-model="showPicker" round position="bottom">
                <van-picker
                        show-toolbar
                        :columns="columns"
                        @cancel="showPicker = false"
                        @confirm="onConfirm"
                ></van-picker>
            </van-popup>


            <van-cell-group>
                <van-field
                        clearable
                        clickable
                        required
                        v-model="title"
                        name="title" label="标题" placeholder="请输入标题">
                </van-field>
            </van-cell-group>

            <van-field
                    v-model="content"
                    name="content"
                    rows="4"
                    clickable
                    autosize
                    required
                    label="内容"
                    type="textarea"
                    placeholder="请输入您将要发布的内容"
                    show-word-limit
            ></van-field>

            <van-field name="img" label="图片上传">
                <template #input>
                    <van-uploader v-model="img" :max-count="5" :after-read="afterReadImg"></van-uploader>
                </template>
            </van-field>

            <van-field name="video" label="视频上传">
                <template #input>
                    <van-uploader v-model="video" :max-count="1" :after-read="afterReadVideo" accept="video/*"></van-uploader>
                </template>
            </van-field>


            <van-field
                    readonly
                    clickable
                    left-icon="location-o"
                    label="选择地址"
                    :value="address"
                    name="address"
                    @click="showAddress = true"
            ></van-field>
            <van-popup v-model="showAddress" round position="bottom">
                <van-area title="选择地址"
                          :area-list="areaList"
                          @cancel="showAddress = false"
                          @confirm="onConfirmAddress"
                ></van-area>
            </van-popup>

            <van-cell-group>
                <van-field
                        clearable
                        clickable
                        v-model="address_detail"
                        name="address_detail" label="详细地址" placeholder="请输入详细地址">
                </van-field>
                <van-field
                        clearable
                        clickable
                        v-model="contact_phone"
                        name="contact_phone" label="联系方式" placeholder="请输入联系方式">
                </van-field>
                <van-field
                        clearable
                        clickable
                        v-model="contact_name"
                        name="contact_name" label="联系人" placeholder="请输入联系人">
                </van-field>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>

        </van-form>
    </div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                forum_cate: '',
                title: '',
                content: '',
                img: [],
                video: [],
                showPicker: false,
                showAddress: false,
                columns: [],
                areaList: [],
                address: '',
                address_detail : '',
                contact_name : '',
                contact_phone : '',
                id:"{$Think.get.forum_id}",
            }
        },
        created(){
            this.getShopCate()
            this.getAreaList()
            if (this.id){
                this.getForumDetail()
            }
        },
        methods:{
            // 获取店铺分类
            getShopCate(){
                let that = this;
                axios.post("{:url('Forum/getForumCate')}",{type:"form"}).then(function (ret) {
                    let columns = []
                    ret.data.data.forEach(function (item, index) {
                        columns.push(item.name)
                    })
                    that.columns = columns;
                })
            },
            onSubmit(values){
                if (values.forum_cate == ''){
                    vant.Notify({type:'danger',message:'分类必须选择',duration:1000})
                    return false;
                }
                if (values.title == ''){
                    vant.Notify({type:'danger',message:'标题不能为空',duration:1000})
                    return false;
                }
                if (values.content == ''){
                    vant.Notify({type:'danger',message:'内容不能为空',duration:1000})
                    return false;
                }
                values.address = this.address
                values.id = this.id
                let that = this;
                axios.post("{:url('Forum/saveForum')}",values).then(function (res) {
                    let ret = res.data
                    if(ret.code == 0){
                        vant.Notify({type:'success',message:ret.msg,duration:1000,onClose:function () {
                            window.history.back()
                            }})
                    }else{
                        vant.Notify({type:'danger',message:ret.msg,duration:1000})
                    }
                })
            },
            onConfirm(value) {
                this.forum_cate = value;
                this.showPicker = false;
            },
            onConfirmAddress(value) {
                let address = []
                value.forEach(function (item,index) {
                    address[index] = item.name
                })
                this.address = address.join(',');
                this.showAddress = false;
            },
            afterReadImg(fileObj,detail) {
                // 创建form对象
                let file = fileObj.file
                let that = this
                let formdata1 = new FormData();
                formdata1.append('file', file, file.name);
                //设置请求头
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                };
                //this.axios 是因为在main.js写在vue实例里
                const axiosAjax = axios.create({
                    timeout: 1000 * 60, //时间
                    withCredentials: true //跨域携带cookie
                });
                axiosAjax.post("{:url('common/base/uploadFile')}",formdata1,config).then((ret)=>{
                    let res = ret.data
                    if(res.code == 0){
                        that.img[detail.index] = res.data.src
                    }else{
                        vant.Notify({type:'danger',message:res.msg})
                    }
                })
            },
            afterReadVideo(fileObj,detail) {
                // 创建form对象
                let file = fileObj.file
                let that = this
                let formdata1 = new FormData();
                formdata1.append('file', file, file.name);
                //设置请求头
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                };
                //this.axios 是因为在main.js写在vue实例里
                const axiosAjax = axios.create({
                    timeout: 1000 * 60, //时间
                    withCredentials: true //跨域携带cookie
                });
                axiosAjax.post("{:url('common/base/uploadFile')}",formdata1,config).then((ret)=>{
                    let res = ret.data
                    if(res.code == 0){
                        that.video[detail.index] = res.data.src
                    }else{
                        vant.Notify({type:'danger',message:res.msg})
                    }
                })
            },
            getAreaList(){
                let that = this
                axios.post("{:url('user/getAreaList')}").then(function (ret) {
                    that.areaList = ret.data.data
                    that.getAddress()
                })
            },
            getAddress(){
                let that = this
                wx.ready(function(){
                    wx.getLocation({
                        type: 'wgs84',
                        success: function (res) {
                            axios.post("{:url('forum/getAddress')}",{
                                latitude:res.latitude,
                                longitude:res.longitude,
                            }).then(function (ret) {
                                let address = [];
                                address[0] = ret.data.data.province
                                address[1] = ret.data.data.city
                                address[2] = ret.data.data.district
                                that.address = address.join(',')
                            })
                        },
                        fail:function () {
                            axios.post("{:url('user/getAreaList')}").then(function (ret) {
                                let address = [];
                                address[0] = ret.data.data.province
                                address[1] = ret.data.data.city
                                address[2] = ret.data.data.district
                                that.address = address.join(',')
                            })
                        }
                    });
                });
            },
            getForumDetail(){
                let that = this
                axios.post("{:url('forum/getForumDetail')}",{
                    forum_id:that.id,
                }).then(function (ret) {
                    let data = ret.data.data
                    that.forum_cate = data.forum_cate_name
                    that.title = data.title
                    that.content = data.content
                    that.address_detail = data.address
                    that.contact_phone = data.contact_phone
                    that.contact_name = data.contact_name
                    that.img = data.img.split(',')
                    that.video = data.video.split(',')

                    let address = [];
                    address[0] = data.province
                    address[1] = data.city
                    address[2] = data.area
                    that.address = address.join(',')
                })
            },
        },
    })
</script>
</body>
</html>
